<template>
    <div class="tinymce-box">
        <Editor v-model="contentValue" :init="initOption" :disabled="disabled"></Editor>
    </div>
</template>
<script lang="ts" setup>
import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce'
import { computed, reactive, ref, watch } from 'vue';
import { upload, host } from '@/utils/http'
const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    },
    disabled: {
        type: Boolean,
        default: false
    },

    plugins: {
        type: [String, Array],
        default: 'lists image link media table  wordcount  fullscreen emoticons preview code insertdatetime '
    },//必填
    toolbar: {
        type: [String, Array],
        default:
            "codesample bold italic underline alignleft aligncenter alignright alignjustify | undo redo |image| formatselect | fontselect | fontsizeselect | forecolor backcolor | bullist numlist outdent indent | lists link table code | removeformat ",
    },//必填
})

// const emits = defineEmits(['update:modelValue'])
const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()

// const contentValue = ref(props.modelValue)
const initOption = reactive({
    base_url: '/tinymce',
    language_url: "/tinymce/langs/zh-Hans.js",
    language: 'zh-Hans',
    skin_url: "/tinymce/skins/ui/oxide", // skin路径，具体路径看自己的项目
    height: 400, //编辑器高度
    branding: false, //是否禁用“Powered by TinyMCE”
    menubar: true, //顶部菜单栏显示
    image_dimensions: false, //去除宽高属性
    plugins: props.plugins,  //这里的数据是在props里面就定义好了的
    toolbar: props.toolbar, //这里的数据是在props里面就定义好了的
    font_formats: 'Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;', //字体
    fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 64px 72px', //文字大小
    // paste_convert_word_fake_lists: false, // 插入word文档需要该属性
    paste_webkit_styles: "all",
    paste_merge_formats: true,
    nonbreaking_force_tab: false,
    paste_auto_cleanup_on_paste: false,
    placeholder: '在这输入文字',
    resize: false,//编辑指定宽高是否可变，false-否，'both'-宽高均可变
    elementpath: false,
    content_style: "img {max-width:100%}", //直接自定义可编辑区域的css样式
    paster_data_images: true,
    images_upload_handler: (blobInfo: { blob: () => string | Blob; }, success: (arg0: string) => void, failure: (arg0: any) => void) => {
        const formData = new FormData() //创建表单对象
        formData.append('file', blobInfo.blob())
        upload(formData).then((res) => {
            console.log(res.url)
            success(res.url)
        }).catch(err => {
            failure(err.response.data.message)
        })
    }
})
const contentValue = computed({
    get() {
        return props.modelValue
    },
    set(value){
        emit('update:modelValue',value)
    }
})
// watch(()=>contentValue.value,()=>{
//     emits('updateModelValue',contentValue.value)
// })
</script>

<style></style>